<template>

		<view class="cardItem next-class" :style="`width:${width}`">
			<view class="card-head" >
				<span>{{title}}</span>
			</view>
			<view class="card-body">
				<slot name="content"></slot>
			</view>
		</view>
</template>

<script>
	export default {
		props:['title','width'],
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.cardItem {
		width: 334rpx;
		min-height: 334rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(174, 174, 174, 0.16);
		border-radius: 20rpx;
		margin-right: 30rpx;
	}

.card-head {
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		width: 100%;
		height: 46rpx;
		background: #5856D6;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		padding: 0 16rpx;
		line-height: 46rpx;
		color: #FFFFFF;
	}

.card-body {
		padding: 12rpx 0rpx;
	}

.card-body .calss-name {
		font-size: 28rpx;
		color: #3D3D3D;
		margin-bottom: 10rpx;
	}
.card-body .time {
		font-size: 24rpx;
		color: #B5B5B5;
	}

</style>
